<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/iconfont.js"></script>
  <link  href="css/search.css" rel="stylesheet" />
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="search">
  <div class="search-top">
    <ul id="search-top">
      <li class="selected"><a>宝贝</a></li>
      <li><a>天猫</a></li>
      <li><a>店铺</a></li>
    </ul>
  </div>
  <div class="search-middle">
    <div class="search-input">
      <div class="search-tab">
        <ul  id="search-tab">
          <li><a>宝贝</a>
          <div class="search-tab-dropmenu hide">
            <ul>
              <li><a>天猫</a></li>
              <li><a>店铺</a></li>
            </ul>
          </div>
          </li>
        </ul>
      </div>
      <input type="text" placeholder="请输入搜索文字"/>
      <i class="clear"></i>
    </div>
    <div class="search-btn">
      <input type="button" value="搜索"/>
    </div>
    <div class="search-icon">
      <i class="icon iconfont">&#xe602;</i>
    </div>
  </div>
  <div class="search-end">
    <ul>
      <li><a>羽绒服</a></li>
      <li><a>女士羽绒服</a></li>
      <li><a>女士毛衣</a></li>
      <li><a>女士卫衣</a></li>
      <li><a>新款裤子</a></li>
      <li><a>半身裙</a></li>
      <li><a>女士棉衣</a></li>
    </ul>
  </div>
</div>
<script>
  $("#search-tab").on("mouseover","li",function(){
    $(".search-tab-dropmenu").removeClass("hide");
  });
  $("#search-tab").on("mouseout","li",function(){
    $(".search-tab-dropmenu").addClass("hide");
  });
  $("#search-top").on("click","li",function(){
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
  })
</script>
</body>